<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>品牌推荐</title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables.min.css"
          rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables-custom.css"
          rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <!--[endif]-->

    <style>
        /*分页相关*/
        .pagination > li > button {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #eee;
        }

        .head-one {
            padding: 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            margin-top: 20px;
            box-sizing: inherit;
            display: block;
            border: 1px solid #ebeef5;
        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;

        }

        .el-card__body {
            margin-bottom: 15px;
            padding: 20px 20px 10px 20px;
            background-color: white;
            font-size: 14px;
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }

        /*窗口*/
        .window {
            width: 650px;
            padding-top: 20px;
            padding-bottom: 50px;
            border-radius: 2px;
            box-shadow: 0 0 3px grey;
            background-color: #fff;
            position: fixed;
            left: 500px;
            top: 150px;
            display: none;
            z-index: 10;
        }

        /*中间层*/
        .not-active {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 5;
        }

        #shade {
            display: none;
        }

        /*关闭弹窗按钮*/
        .window #close-window .btn {
            border: 0;
            outline: none;
            background-color: #fff;
        }

        .window #close-window .btn:hover {
            color: deepskyblue;
        }

        .pagination > li > form, .pagination > li > select, .pagination > li > input {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .pagination > li > input {
            outline: none;
            width: 40px;
            text-align: center;
        }

        #name {
            outline: none;
        }

        #name:focus {
            border: 2px #bfbdbd solid;
        }

        #my-select {
            outline: none;
        }

        #type {
            outline: none;
            padding: 3px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: black;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body class="sticky-header">


<%@include file="../inc/left.jsp" %>


<!-- main content start-->
<div class="main-content">

    <%@include file="../inc/header.jsp" %>
    <div class="wrapper" style="background-color:rgb(238, 238, 238);margin-top: -10px">
        <div class="page-title-box " style="margin-right: 27px;width: 1405px;margin-top: -5px">
            <h4 class="page-title" style="margin-left: 10px">品牌推荐(陆钢)</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">营销</a>
                </li>
                <li class="active">
                    品牌推荐
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <div class="el-card__body head-one" style="margin-top: -2px;border:1px solid rgb(204,204,204) ">
            <a href="${pageContext.request.contextPath}/sell/brand">
                <button class="btn-default" style="float: right; margin-right: 15px;height: 40px;margin-top: 30px">
                    <span>重置</span></button>
            </a>
            <form method="post" action="${pageContext.request.contextPath}/sell/selectBrand">
                <div data-v-2ef16592=""><i class="fa fa-search"></i> <span
                        data-v-2ef16592="" style="font-size: 16px;color: rgb(135,134,134)">筛选搜索</span>
                    <button type="submit" class="btn-info"
                            style="float: right;margin-right: 20px;height: 40px;margin-top: 30px">
                        <span>查询搜索</span></button>
                </div>
                <div style="margin-top: 15px;">
                    <div class="row">
                        <div class="form-inline line-one">
                            <div class="col-md-4 col-md-offset-1">
                                <label class="control-label wk-filed-label"
                                       style="color: rgb(135,134,134)">品牌名称： </label>
                                <div class="input-group">
                                    <input required="required" name="brandName" type="text"
                                           class="form-control wk-long-2col-input" placeholder="品牌名称"/>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label class="control-label wk-filed-label"
                                       style="color: rgb(135,134,134)">推荐状态：</label>
                                <select class="wk-select form-control " name="recommendStatus">
                                    <option value="1">推荐中</option>
                                    <option value="0">未推荐</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
            <br>
        </div>

        <div data-v-2ef16592="" class="el-card filter-container is-never-shadow "><!---->
            <div data-v-2ef16592="" class="el-card operate-container is-never-shadow head-two "
                 style="margin-top: -5px;border:1px solid rgb(204,204,204)"><!---->
                <div class="el-card__body">
                    <i data-v-2ef16592="" class="fa fa-file-text-o"></i>
                    <span data-v-2ef16592="" class="head-one1" style="color: rgb(135,134,134)">数据列表</span>
                    <div style="float: right;margin-right: 40px;">
                        <a href="${pageContext.request.contextPath}/sell/addBrand">
                            <button data-v-2ef16592="" type="button"
                                    class="btn-info"
                                    style="height: 40px;"><!----><!----><span>添加品牌</span>
                            </button>
                        </a>
                    </div>
                </div>
                <br>
            </div>
            <%--Start 弹窗 --%>
            <div id="shade" class="not-active">
                <div class="window row col-sm-12">
                    <div class="col-sm-2" style="margin-bottom: 20px">
                        <h4>编辑排序</h4>
                    </div>
                    <div class="col-sm-12">
                        <form action="${pageContext.request.contextPath}/sell/updateBrandSort" method="post"
                              class="form-group">
                            <input value="/sell/brand/?page=${param.page}" name="path" style="display: none">
                            <div class="col-sm-12">
                                <div class="col-sm-12" style="display: none">
                                    <div class="col-sm-3 text-right">
                                        <label for="id">ID：</label>
                                    </div>
                                    <div class="col-sm-7">
                                        <input id="id" name="id" class="form-control">
                                    </div>
                                </div>

                                <div class="col-sm-3 text-right">
                                    <label for="sort">排序：</label>
                                </div>
                                <div class="col-sm-7">
                                    <input id="sort" name="sort" class="form-control">
                                </div>
                                <br>
                                <br>
                                <br>
                                <div class="col-sm-1 col-sm-offset-4">
                                    <input type="submit" value="确认" class="btn btn-success">
                                </div>
                                <div class="col-sm-1 col-sm-offset-1">
                                    <a>
                                        <button href="${pageContext.request.contextPath}/sell/brand"
                                                class="btn btn-primary">取消
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <%--End 弹窗 --%>
            <div data-v-2ef16592="" style="margin-top: 15px;border:1px solid rgb(204,204,204)" class="head-one">
                <div class="head-three">
                    <table class="table table-bordered table-main" style="border-collapse: collapse">
                        <thead>
                        <tr>
                            <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">品牌名称</th>
                            <th style="text-align: center;width: 150px">是否推荐</th>
                            <th style="text-align: center">排序</th>
                            <th style="text-align: center">状态</th>
                            <th style="text-align: center;width: 200px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${brands.list}" var="b">
                            <tr style="height: 40px">
                                <td><input type="checkbox" id="checks"></td>
                                <td>${b.id}</td>
                                <td>${b.brandName}</td>
                                <td>
                                    <i style="color: #0e90d2;font-size: 30px;line-height: inherit"
                                       class="fa fa-toggle-${b.recommendStatus==1?"on":"off"}"
                                       onclick="changeStatus(${b.id})">
                                    </i></td>
                                <td>${b.sort}</td>
                                <td>${b.recommendStatus==1?"推荐中":"未推荐"}</td>
                                <td>
                                    <button id="btn-update" class="btn-info" onclick="update(${b.id})"
                                            style="height: 30px">设置排序
                                    </button>
                                    <button id="btn-delete" class="btn-danger"
                                            onclick="del(${b.id})" style="height: 30px">删除
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <br>
                    <div>
                        <form action="${pageContext.request.contextPath}/sell/brand?page">

                            <ul class="pagination" id="myul">
                                <li class="pagination">
                                    <span>共${brands.total}条</span>
                                </li>
                                <li class="pagination">
                                    <select id="pages">
                                        <option value="5" ${brands.pageSize==5?"selected":""}>5条/页</option>
                                        --%>
                                        <option value="10" ${brands.pageSize==10?"selected":""}>10条/页</option>
                                        <option value="15" ${brands.pageSize==15?"selected":""}>15条/页</option>
                                    </select>
                                </li>
                                <c:if test="${brands.pageNum>1}">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/sell/brand?page=${brands.pageNum-1}">上一页</a>
                                    </li>
                                </c:if>

                                <c:forEach begin="1" end="${brands.pages}" var="i">
                                    <li class="${brands.pageNum==i?"active":""}"><a
                                            href="${pageContext.request.contextPath}/sell/brand?page=${i}">${i}</a></li>
                                </c:forEach>

                                <c:if test="${brands.pageNum<brands.pages}">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/sell/brand?page=${brands.pageNum+1}">下一页</a>
                                    </li>
                                </c:if>
                                <li>
                                    <button id="goto" type="button" class="btn btn-default"
                                            style="text-align: center;">前往
                                    </button>
                                </li>
                                <li class="pagination">
                                    <input name="page" id="target">
                                </li>
                                <li class="pagination">
                                    <span>页</span>
                                </li>
                            </ul>
                        </form>
                    </div>

                    <br>
                </div>
            </div>
        </div>
    </div>
    <!-- End Wrapper-->

    <%@include file="../inc/footer.jsp" %>


</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<%--<script src="${pageContext.request.contextPath}/assets/plugins/datatables/js/jquery.dataTables.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/assets/pages/table-data.js"></script>
<!--End Page Level Plugin-->
<!-- End core plugin -->
<script>

    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick = function () {
            all.checked = this.checked
        }
    }

    function changeStatus(id) {
        $.get("${pageContext.request.contextPath}/sell/statusByBrandId/" + id, function (response) {
            if (response.code == 1) {
                location.reload();
            }
        })
    }

    <%--    每页条数--%>
    $("#pages").change(function () {
        let size = $(this).val();
        console.info(size)
        location.href = "${pageContext.request.contextPath}/sell/brand?page=1&size=" + size;
    })

    // 删除确认
    function del(id) {
        let sure = confirm("确定删除吗？");
        if (sure) {
            console.info("确认删除")
            $.get("${pageContext.request.contextPath}/sell/deleteByBrandId/" + id, function (response) {
                if (response.code == 1) {
                    location.reload();
                }
            })
        }
    }

    // 弹出表单输入窗口
    function openWindow() {
        $("#shade").show();
        $(".window").show();
    }

    // 关闭窗口
    $("#close-window").click(function () {
        $(".window").hide();
        $("#shade").hide();
    })

    // 修改排序时回显
    function update(id) {
        openWindow()
        $.ajax({
            type: 'get',
            url: '${pageContext.request.contextPath}/sell/selectByBrandId/' + id,
            success: function (response) {
                console.info(response.data)
                $("#id").val(response.data.id);
                $("#sort").val(response.data.sort);
            }
        })
    }

    $("#reset").click(function () {
        $("#start").val("");
        $("#end").val("");
        $("#title").val("");
    })
    // 上一页
    $("#prev").click(function () {
        let size = $("#pages").val();
        location.href = "${pageContext.request.contextPath}/sell/brand?page=${brands.pageNum-1}" + "&size=" + size;
    })
    // 下一页
    $("#next").click(function () {
        let size = $("#pages").val();
        location.href = "${pageContext.request.contextPath}/sell/brand?page=${brands.pageNum + 1}" + "&size=" + size;
    })
    // 跳转指定页数
    $("#goto").click(function () {
        let target = $("#target").val();
        let pages = ${brands.pages};
        console.info("前往" + target);
        console.info("总页数" + pages);
        if (target > pages) {
            target = pages;
        } else if (target < 1) {
            target = 1
        }
        location.href = '${pageContext.request.contextPath}/sell/brand?page=' + target + '&size=' + ${brands.pageSize};

    })
</script>
</body>

</html>

